<script setup>
import router from "../router/index.js";
import { ref, reactive, resolveDynamicComponent } from "vue";
import { RouterView } from "vue-router";
import request from "../utils/request.js";
import { useUserStore } from "../stores/user.js";
import { ElMessage } from "element-plus";

const boData = reactive({
  borrowData: [],
});
const userId = ref()
userId.value = useUserStore().getUser.id
const showBorrowList = () =>{
    request.get("/borrow/selectAllByUserId/" + userId.value).then((res)=>{
        if(res.code === "200"){
            boData.borrowData = res.data
        }
    })
}
showBorrowList()

const goback = () => {
  router.go(-1);
};

const returnBook =(borrowbook)=>{
    if(borrowbook.status === 1){
      ElMessage.success("书籍已经归还")
    }else{
      request.post("/borrow/returnBook",borrowbook).then((res)=>{
        if(res.code === "200"){
          showBorrowList()
          ElMessage.success(res.msg)
        }else if(res.code === "300"){
          showBorrowList()
          ElMessage.warning(res.msg)
        }
      })
    }
}
</script>

<template>
  <div class="borrow">
    <!-- 标题 -->
    <div class="title">
      <div style="font-size: 20px; font-weight: bold">借续还书</div>
      <div>
        <el-button type="info" @click="goback()">返回</el-button>
      </div>
    </div>

    <!-- 数据表 -->
    <div class="borrowlist">
      <el-table 
      :data="boData.borrowData" 
      height="550" 
      style="width: 100%"
      :default-sort="{ prop: 'timeStart', order: 'descending' }"
      >
        
        <el-table-column prop="bookName" label="书名" width="150" />
        <!-- 时间格式存在问题 -->
        <el-table-column prop="timeStart" sortable label="借书时间" />
        <el-table-column label="还书时间">
            <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="color:red">{{scope.row.timeEnd}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="借书时长" width="150">
            <template #default="scope">
            <div style="display: flex; align-items: center">
              <span>{{scope.row.timeLength}}天</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="150">
            <template #default="scope">
            <div style="display: flex; align-items: center">
              <span v-if="scope.row.status === 0" style="color:green">借阅中</span>
              <span v-if="scope.row.status === 2" style="color:red">超时未还</span>
              <span v-if="scope.row.status === 1">已还</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
             
              <el-button type="primary" @click="returnBook(scope.row)" v-if="scope.row.status !== 1">还书</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
.borrow {
  min-width: 1000px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  background-color: aliceblue;
  padding: 20px;
}
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>